vlwkaos' digital garden

JavaScript - Hoisting

Hoisting은 통상적으로 컴파일러가 "변수 선언와 초기화를 나눠 선언을 코드의 상단으로 올려주는" 것을 의미한다.

JavaScript에서 Hoisting은 컴파일러가 코드가 실행되기 이전에 변수와 함수 선언을 메모리([[JavaScript - lexical environment]])에 올리는 것을 이야기한다. 이로써 통상적인 Hoisting과 비슷한 동작을 보장하는 것이다.

  • var로 선언한 변수의 경우 undefined로 초기화된다.
  • letconst로 선언한 변수는 hoisting에 포함되지 않는다.

함수 선언을 메모리에 미리 올리는 것의 이점은, 코드 상 선언하기 이전 시점에서도 함수를 사용할 수 있다는 것이다.

catName("Chloe")

function catName(name) {
  console.log("My cat's name is " + name) // 잘 실행됨
}

JavaScript에서 Hoisting은 var과 함수의 선언에만 이뤄진다. 함수는 hoisting에 의해 Scope내 어디서든 사용 가능하지만, var로 선언된 변수 값은 초기화 시점까지 undefined라는 특징이 있다.

console.log(num) // Returns 'undefined' from hoisted var declaration (not 6)
var num // Declaration
num = 6 // Initialization

선언을 하지 않고 바로 초기화 했을 때는 선언과 초기화가 그 시점에 발생하므로, 이전에 참조하는 경우 없는 변수라고 에러가 나온다.

console.log(num) // Throws ReferenceError exception
num = 6 // Initialization

👀 더 자세한 내용은 다음을 보자 [[JavaScript - Scope]], [[JavaScript - Execution Context]]

JavaScript - Hoisting